<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <title>Examples</title>
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <meta name="description" content="" />
  <meta name="keywords" content="" />
  <link href="" rel="stylesheet" />
</head>

<body>
  <div id="root">
    <div>{{title}}</div>
    <!-- <button @click="handleClick('x',$event)">click1</button>
      <button @click="()=>{title='world'}">click3</button>
      <button @click="title = 'world'">click2</button> -->
    <div @click="title='abc'">
      <button @click.stop="title = 'world'">click</button>
      <!--hello > world > abc-->
      <!-- 阻止默认事件，比如a标签的跳转 -->
      <a @click.prevent="handleClick" href="http://www.baidu.com">test-prevent</a>
      <!-- 只阻止一次 -->
      <a @click.prevent.once="handleClick" href="http://www.baidu.com">test-once</a>
    </div>

    <!-- 绑定事件，子容器点击也生效 -->
    <!-- <div @click="handleClick2" style="width: 100px; height: 100px; background: red;"> -->
    <!-- 绑定事件，只有点击绑定的div才生效 -->
    <div @click.self="handleClick2" style="width: 100px; height: 100px; background: red;">
      <div style="width: 50px; height: 50px; background: green;">
        map
      </div>
    </div>
    <input type="text" @keyup.enter="handleKeyup">
  </div>
  <script src="../vue.js"></script>
  <script>
    var vm = new Vue({
      el: "#root",
      data: {
        title: 'hello',
      },

      methods: {
        handleClick(args, e) {
          console.log(args)
        },
        handleClick2() {
          console.log(100);
        },
        handleKeyup() {
          console.log(0);
        }
      },
    })
    // 去掉run...提示
    Vue.config.productionTip = false
  </script>
</body>

</html>